<script setup>
import { ref } from 'vue'
const input = ref('')
const select = ref('')
const show = ref(false)

const showHistory = () => {
  show.value = true
}

const hideHistory = () => {
  show.value = false
}
</script>
<template>
  <el-input
    placeholder="搜索职位或公司"
    v-model="input"
    @focus="showHistory"
    @blur="hideHistory"
  >
    <template #prepend>
      <el-select v-model="select" placeholder="职位类型">
        <el-option label="互联网/AI" value="1" />
        <el-option label="电子/电器/通信" value="2" />
        <el-option label="产品" value="3" />
      </el-select>
    </template>
    <template #append>
      <el-button>搜索</el-button>
    </template>
  </el-input>

  <!-- 搜索记录插槽出口 -->
  <slot name="showHistory" v-if="show"></slot>
</template>
<style lang="scss" scoped>
.el-input {
  background-color: #409eff;
  border-radius: 6px;
  width: 900px;
  font-size: 16px;

  :deep() {
    .el-input__wrapper {
      height: 56px;
      box-shadow: none;
      margin: 2.5px 0;
      border-radius: 0 6px 6px 0;
      border-left: none;
    }

    .el-input-group__prepend {
      box-shadow: none;
      margin: 2.5px 0 2.5px 2.5px;
      background-color: white;
    }

    .el-select {
      width: 115px;
    }

    .el-select:hover {
      background-color: white;
    }

    .el-input-group__prepend .el-select .el-select__wrapper {
      box-shadow: none;
      background-color: white;
      font-size: 16px;
    }

    .el-input-group__append {
      box-shadow: none;
      background-color: transparent;
      margin: 2.5px 2.5px 2.5px 0;
    }

    .el-button {
      height: 100%;
      font-size: 20px;
      font-weight: 700;
      width: 128px;
      color: white;
    }

    .el-button:hover {
      color: white;
    }
  }
}
</style>
